<template>
  <div>
    <Modal
      v-model="visible"
      :title="addModelData.title"
      @on-ok="ok"
      @on-cancel="cancel"
      class-name="centerModel"
      okText="确定"
      width="284"
    >
      <Form :model="form" label-position="top">
        <FormItem label="部门名称">
          <Input v-model="form.title" placeholder="请输入部门名称"></Input>
        </FormItem>
          <FormItem label="上级部门">
            <Select class="formInput" v-model="form.pid" placeholder="请选择上级部门">
              <Option v-for="item in addModelData.departmentList" :value="item.id" :key="item.id">
                <span v-for="i in item.level" :key="i">&nbsp;&nbsp;</span>
                <span v-if="item.level">| </span>
              {{ item.title }}</Option>
            </Select>
          </FormItem>
        </FormItem>
        <FormItem label="部门负责人">
          <div v-if="!form.system_user_id" class="addIcon" @click="addSystemUser"><Icon type="md-add" /></div>
          <div class="workerItem" @click="addSystemUser" v-else>
            <img
              :src="director.avatar"
              onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
            />
            <p class="name">{{director.name}}</p>
          </div>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </Modal>
    <addSystemUser :show="addSystemUserShow" @showModel="showModel" @select="selectSystemUser" :departmentUserList="addModelData.departmentUserList"/>
  </div>
  
</template>
<script>
import addSystemUser from './addSystemUser'
import {departmentSave} from '@/api/department'
export default {
  name: 'addModel',
  components:{
    addSystemUser
  },
  props: {
    show: Boolean,
    addModelData: Object
  },
  data () {
    return {
      visible: this.show,
      addSystemUserShow:false,
      director:{},
      form: {
        title: '',
        pid: '',
        system_user_id: ''
      }
    }
  },
  watch: {
    show (newv, oldv) {
      this.visible = newv
      this.form = {
        title: '',
        pid: '',
        system_user_id: ''
      };
      this.director={};
    },
    addModelData(newv){
      if(newv.name){
        this.form.title = newv.name;
      }
    }
  },
  mounted () {},
  methods: {
    ok () {
      let {title,pid,system_user_id} = this.form;
      if(!title){
        this.$Message.warning('请输入部门名称');
        return
      }
      departmentSave({
        title,
        pid,
        system_user_id
      }).then(res=>{
        if(res.code == 100000){
          this.$emit('save')
        }else{
          this.$Message.error(res.msg);
        }
      })
      
    },
    cancel () {
      this.$emit('cancel', false)
    },
    addSystemUser(){
      this.addSystemUserShow = true;
    },
    showModel(show){
      this.addSystemUserShow = show;
    },
    selectSystemUser(director){
      this.director = director;
      this.form.system_user_id = director.system_user_id
    }
  }
}
</script>
<style lang="less" scoped>
  .addIcon{
    font-size: 32px;
    color: #16CCA6;
    cursor: pointer;
  }
  .workerItem{
    display: flex;
    margin-top: 20px;
    cursor: pointer;
    img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #979797;
    }
    p{
      font-size: 12px;
      color: #9F9F9F;
      margin-left: 5px;
    }
  }
</style>
